<template>
  <div class="date" @click="showCalendar = true">
    <div class="item start">
      <div class="tip">入住</div>
      <div class="time">{{ startDay }}</div>
    </div>
    <div class="stay">共{{ stayDay }}晚</div>
    <div class="item end">
      <div class="tip">离店</div>
      <div class="time">{{ endDay }}</div>
    </div>
</div>
<!-- 加上日历 -->
<van-calendar
  v-model:show="showCalendar"
  type="range"
  @confirm="onConfirm"
  color="#ff9854"
  :round="false"
/>

<!-- 加上价格等数据 -->
<div class="infos">
    <div class="price-count">
        <div class="price">价格不限</div>
        <div class="count">人数不限</div>
    </div>
    <div class="searchMeaasge">
        关键字/位置/民宿名
    </div>
</div>
</template>


<script setup>
import { ref } from "vue";
//找到homeStore库
import useHomeStore from "../../../stores/modules/homeStore";
const store = useHomeStore();

//找到时间
const nowDay = new Date();
const newDay = new Date();
newDay.setDate(newDay.getDate() + 1);
//将时间放到Homestore里面
 store.startTime = nowDay;
  store.endTime = newDay;
//时间格式化:使用datejs库
import { formatDate, getDiffDay } from "../../../utils/formatDate";
//计算时间差

const startDay = ref(formatDate(nowDay,"MM月DD日"));
const endDay = ref(formatDate(newDay,"MM月DD日"));
const stayDay = ref(getDiffDay(nowDay, newDay));
// //获取时间
// store.startTime = startDay.value;
// store.endTime = endDay.value;
//加上日历
let showCalendar = ref(false);
function onConfirm(value) {
  startDay.value = formatDate(value[0],"MM月DD日");
  endDay.value = formatDate(value[1],"MM月DD日");
  showCalendar.value = false;
  stayDay.value = getDiffDay(value[0], value[1]);
  //将开始时间和结束时间放到homeStore中
  store.startTime = value[0];
  store.endTime = value[1];
}


</script>


<style lang="less" scoped>
.date {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
   
  .start {
    margin-left: 10px;
  }

   

  .end {
    margin-right: 40px;
  }

  
  .stay {
    color: #666;
    font-size: 14px;
    padding-top: 8px;
  }

  .time {
    color: #333;
    margin-top: 8px;
  }

  .item .tip
  {
    font-size: 12px;
    color: #999;
  }

  //infos style
}
.infos
{
    color: #999;
    font-size: 14px;
  .price-count
  {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      padding-right:48px;
      margin-top:10px;
  }

  .searchMeaasge
  {
     margin-top: 20px;
     padding-left:10px;
  }

}
</style>